<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人中心</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="./index.css">
  <script>tailwind.config = { theme: { extend: { colors: { primary: '#8E6FF7' }, borderRadius: { 'none': '0px', 'sm': '2px', DEFAULT: '4px', 'md': '8px', 'lg': '12px', 'xl': '16px', '2xl': '20px', '3xl': '24px', 'full': '9999px', 'button': '4px' } } } }</script>

  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#8B4513',
            secondary: '#D2691E'
          },
          borderRadius: {
            'none': '0px',
            'sm': '2px',
            DEFAULT: '4px',
            'md': '8px',
            'lg': '12px',
            'xl': '16px',
            '2xl': '20px',
            '3xl': '24px',
            'full': '9999px',
            'button': '4px'
          }
        }
      }
    }
  </script>
  <style>
    body {
      min-height: 1024px;
      font-family: 'Noto Serif SC', serif;
      background-color: #FAF9F6;
    }

    .nav-link {
      position: relative;
    }

    .nav-link::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 0;
      height: 2px;
      background-color: #8B4513;
      transition: width 0.3s;
    }

    .nav-link:hover::after {
      width: 100%;
    }

    .active::after {
      width: 100%;
    }

    .tab-content {
      display: none;
    }

    .tab-content.active {
      display: block;
    }
  </style>
</head>

<body>
  <span class="alert"></span>
  <header class="fixed top-0 left-0 right-0 bg-white shadow-sm z-50">
    <div class="max-w-7xl mx-auto px-4">
      <div class="flex items-center justify-between h-16">
        <div class="flex items-center">
          <h1 class="text-4xl font-['Pacifico'] text-primary mb-4">AI Poetry Assistant</h1>
        </div>
        <nav class="hidden md:flex space-x-8">
          <a href="../index/index.html" class="nav-link text-gray-600 hover:text-primary">返回首页</a>
        </nav>
      </div>
    </div>
  </header>
  <main class="pt-16">
    <div class="relative h-80 bg-cover bg-center"
      style="background-image: url('https://ai-public.mastergo.com/ai/img_res/c846c4d28a56c09bdb862b2b62904ecd.jpg')">
      <div class="absolute inset-0 bg-black bg-opacity-30"></div>
      <div class="absolute bottom-0 left-0 right-0">
        <div class="max-w-7xl mx-auto px-4 pb-8">
          <div class="flex items-end space-x-6">
          </div>
        </div>
      </div>
    </div>

    <div class="max-w-7xl mx-auto px-4 py-8">
      <div class="flex space-x-4 border-b">
        <button class="tab-btn px-6 py-3 text-primary border-b-2 border-primary" data-tab="likes">我的喜欢</button>
        <button class="tab-btn px-6 py-3 text-gray-500 hover:text-primary" data-tab="creations">我的创作</button>
      </div>

      <div id="likes" class="tab-content active py-6">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        </div>
      </div>

      <div id="creations" class="tab-content py-6">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <a href="../aicreate/index.html">尚无作品，恰似白纸待墨。轻点此处，奔赴创作天地，绘就属于你的文艺篇章 </a>
        </div>
      </div>
    </div>

    <div class="bjzl w-[480px] bg-white rounded-lg shadow-lg p-6">
      <div class="flex items-center justify-between mb-8">
        <h1 class="text-xl font-medium text-gray-900">编辑个人资料</h1>
        <button class="text-gray-400 hover:text-gray-500 transition-colors">
          <i class="fas fa-times text-xl"></i>
        </button>
      </div>
      <div class="flex flex-col items-center mb-12">
        <div class="relative group">
          <div class="w-32 h-32 rounded-full overflow-hidden bg-gray-100 mb-4">
            <img src="https://ai-public.mastergo.com/ai/img_res/5ffc52a0f5c3523c14d9b8645e933c06.jpg" alt="用户头像"
              class="w-full h-full object-cover">
          </div>
          <label for="avatar-upload"
            class="absolute bottom-4 right-0 bg-white rounded-full w-8 h-8 shadow-md flex items-center justify-center border border-gray-200 hover:bg-gray-50 transition-colors cursor-pointer !rounded-button whitespace-nowrap">
            <i class="fas fa-camera text-gray-600"></i>
            <input type="file" id="avatar-upload" accept="image/*" class="hidden">
          </label>
        </div>
      </div>
      <form class="space-y-6">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">昵称</label>
          <div class="relative">
            <input type="text"
              class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary focus:border-transparent outline-none text-gray-900"
              placeholder="请输入你的昵称" value="诗意栖居">
          </div>
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">个人简介</label>
          <div class="relative">
            <textarea
              class="w-full px-4 py-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary focus:border-transparent outline-none text-gray-900 min-h-[120px]"
              style=" resize: none"
              placeholder="介绍一下你自己吧...">热爱古典诗词，尤其钟情于李白、杜甫的作品。闲暇时喜欢吟诗作对，以诗会友。希望在这里遇见更多志同道合的诗词爱好者，共同探讨中国传统文化的魅力。</textarea>
          </div>
        </div>
        <div class="pt-6">
          <button id="tj" 
            class="w-full bg-primary text-white px-6 py-3 rounded-md hover:bg-primary/90 transition-colors font-medium !rounded-button whitespace-nowrap">
            保存修改
          </button>
        </div>
      </form>
    </div>

    <div class="bjzp w-[480px] bg-white rounded-lg shadow-lg p-6">
      <div class="flex items-center justify-between mb-8">
        <h1 class="text-xl font-medium text-gray-900">修改作品</h1>
        <button class="text-gray-400 hover:text-gray-500 transition-colors">
          <i class="fas fa-times text-xl"></i>
        </button>
      </div>
      <form class="space-y-6">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">标题</label>
          <div class="relative">
            <input type="text"
              class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary focus:border-transparent outline-none text-gray-900"
              placeholder="请输入修改后的标题" value="">
          </div>
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">修改内容</label>
          <div class="relative">
            <textarea
              class="w-full px-4 py-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary focus:border-transparent outline-none text-gray-900 min-h-[120px]"
              style=" resize: none" placeholder="请输入修改后的作品"></textarea>
          </div>
        </div>
        <div class="pt-6">
          <button id="xgzp" data-id="0"
            class="w-full bg-primary text-white px-6 py-3 rounded-md hover:bg-primary/90 transition-colors font-medium !rounded-button whitespace-nowrap">
            保存修改
          </button>
        </div>
      </form>
    </div>
  </main>

  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="../../utils/request.js"></script>
  <script src="../../utils/alert.js"></script>
  <script src="./index.js"></script>
</body>

</html>